let defaultSetting = {
  mode: "light",
  tag: true,
  menuCollapse: false,
  menuWidth: 230,
  layout: "classic",
  skin: "mine",
  i18n: false,
  language: "zh_CN",
  animation: "ma-slide-down",
  color: "#165dff",
  settingOpen: false,
  searchOpen: false,
  ws: true,
  registerWangEditorButtonFlag: false,
};

import { defineStore } from "pinia";
import tool from "@/utils/tool";
import { generate, getRgbStr } from "@arco-design/color";

if (!tool.local.get("setting")) {
  tool.local.set("setting", defaultSetting);
} else {
  defaultSetting = tool.local.get("setting");
}

document.body.setAttribute("arco-theme", defaultSetting.mode);
document.body.setAttribute("mine-skin", defaultSetting.skin);

const useAppStore = defineStore("app", {
  state: () => ({ ...defaultSetting }),

  getters: {
    appCurrentSetting() {
      return { ...this.$state };
    },
  },

  actions: {
    updateSettings(partial) {
      this.$patch(partial);
    },

    toggleMode(dark) {
      this.mode = dark;
      document.getElementsByTagName("html")[0].className = this.mode;
      document.body.setAttribute("arco-theme", this.mode);
      defaultSetting.mode = this.mode;
      this.changeColor(this.color);
      tool.local.set("setting", defaultSetting);
    },

    toggleMenu(status) {
      this.menuCollapse = status;
      defaultSetting.menuCollapse = this.menuCollapse;
      tool.local.set("setting", defaultSetting);
    },

    toggleTag(status) {
      this.tag = status;
      defaultSetting.tag = this.tag;
      tool.local.set("setting", defaultSetting);
    },

    toggleI18n(i18n) {
      this.i18n = i18n;
      defaultSetting.i18n = this.i18n;
      tool.local.set("setting", defaultSetting);
    },

    toggleWs(val) {
      this.ws = val;
      defaultSetting.ws = this.ws;
      tool.local.set("setting", defaultSetting);
    },

    changeMenuWidth(width) {
      this.menuWidth = width;
      defaultSetting.menuWidth = this.menuWidth;
      tool.local.set("setting", defaultSetting);
    },

    changeLayout(layout) {
      this.layout = layout;
      defaultSetting.layout = this.layout;
      tool.local.set("setting", defaultSetting);
    },

    changeLanguage(language) {
      this.language = language;
      defaultSetting.language = this.language;
      tool.local.set("setting", defaultSetting);
      window.location.reload();
    },

    changeColor(color) {
      if (!/^#[0-9A-Za-z]{6}/.test(color)) return;
      this.color = color;
      const list = generate(this.color, {
        list: true,
        dark: this.mode === "dark",
      });
      list.forEach((color, index) => {
        const rgbStr = getRgbStr(color);
        document.body.style.setProperty(`--primary-${index + 1}`, rgbStr);
        document.body.style.setProperty(`--arcoblue-${index + 1}`, rgbStr);
      });
      defaultSetting.color = this.color;
      tool.local.set("setting", defaultSetting);
    },

    changeAnimation(name) {
      this.animation = name;
      defaultSetting.animation = this.animation;
      tool.local.set("setting", defaultSetting);
    },

    useSkin(name) {
      this.skin = name;
      defaultSetting.skin = this.skin;
      document.body.setAttribute("mine-skin", this.skin);
      tool.local.set("setting", defaultSetting);
    },

    setRegisterWangEditorButtonFlag(value) {
      this.registerWangEditorButtonFlag = value;
    },
  },
});

export default useAppStore;
